{% site "test" %}
<!DOCTYPE html>
<html class="google" lang="en">
  <script>
    (function(H){H.className=H.className.replace(/\bgoogle\b/,'google-js')})(document.documentElement)
  </script>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-41133141-6', 'auto');
    ga('send', 'pageview');

  </script>
  <meta charset="utf-8">
  <meta content="initial-scale=1, minimum-scale=1, width=device-width" name="viewport">
  <title>Google Helpouts</title>
  <link href="img/favicon.png" rel="icon" type="image/png" />
  <link href="//fonts.googleapis.com/css?family=Roboto:300,400,600,700&lang=en" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link href="css/carousel.css" rel="stylesheet">
  <!-- header -->
  <div id="header" class="stage">
    <a href="/partner/landing/"><img src="img/google_helpouts_logo_large.png" alt="Google Helpouts"/></a>
    <span>
      <a href="/partner/signup">Sign Up</a>
      <span>|</span>
      <a href="/partner/checkin/provider">View Helpouts Inbox</a>
    </span>
  </div>
  <!-- carousel -->
  <div id="carousel" class="cols">
    <div id="carousel-inner">
      <div class="col-4">
        <h2>Experts with Answers, Meet Developers with Questions</h2>
        <a href="/partner/signup" class="cta">SIGN UP</a>
      </div>
    </div>
    <!-- Slides -->
    <div id="slideshow">
      <div class="slide animate" id="slide-1"></div>
      <div class="slide" id="slide-2"></div>
      <div class="slide" id="slide-3"></div>
    </div>
    <div class="caption-container">
      <div id="carrot"></div>
      <div id="caption-text">
        <p class="caption animate" id="caption-1">Get a request for help and confirm you can answer the question
        <p class="caption" id="caption-2">Start a one-on-one conversation with someone seeking your skills
        <p class="caption" id="caption-3">Continue the discussion on your desktop and use screenshare to make debugging&nbsp;easy
        <div id="controls">
          <div id="button-left"></div>
          <div id="button-right"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- section 1 -->
  <div class="body-content cols">
    <div class="col-12">
      <h1>Why Give Help?</h1>
    </div>
    <div class="col-4 aux-3">
      <img src="img/illustration_01.png" class="img-7"/>
      <h3>Give Back</h3>
      <p>Enrich the developer community by sharing your knowledge.
    </div>
    <div class="col-4 aux-3">
      <img src="img/illustration_02.png" class="img-8"/>
      <h3>Continue Learning</h3>
      <p>Strengthen your own skills by tackling challenging problems.
    </div>
    <div class="col-4 aux-3">
      <img src="img/illustration_03.png" class="img-9"/>
      <h3>Build Your Reputation</h3>
      <p>Earn positive reviews on Helpouts when you help someone.
    </div>
  </div>
  <!-- section 2 -->
  <div class="body-content cols" id="steps">
    <div class="col-12">
      <h1>Signing Up is Simple</h1>
    </div>
    <div class="col-row">
      <div class="col-5 aux-2">
        <div class="bullet-bubble">1</div>
        <div class="bullet-text">
          <h4>Get Started</h4>
          <p>Sign in with your Google Account and add a name and photo
        </div>
      </div>
      <div class="col-7"><img src="img/screenshot_01.png" alt="tbd" class="img-1"/></div>
    </div>
    <div class="col-row">
      <div class="col-8 desktop-only"><img src="img/screenshot_02.gif" alt="tbd" class="img-2"/></div>
      <div class="col-4 aux-2">
        <div class="bullet-bubble">2</div>
        <div class="bullet-text">
          <h4>Add your Programming Skills</h4>
          <p>List the subjects on which you can offer help and your programming experience
        </div>
      </div>
      <div class="col-8 mobile-only"><img src="img/screenshot_02.gif" alt="tbd" class="img-2"/></div>
    </div>
  <!-- section 3 -->
    <div class="col-row">
      <div class="col-5 aux-2">
        <div class="bullet-bubble">3</div>
        <div class="bullet-text">
          <h4>Coming Soon: Download our App</h4>
          <p>Use the app to connect with people and start helping
        </div>
      </div>
      <div class="col-7"><img src="img/screenshot_03.png" alt="tbd" class="img-3"/></div>
    </div>
    <div class="col-12 aux-1">
      <p>Ready to give help?
    </div>
    <div class="col-12 aux-1">
      <a href="/partner/signup" class="cta">SIGN UP</a>
    </div>
  </div>
  <!-- section 4 -->
  <div class="body-content cols" id="partners">
    <div class="col-12">
      <h1>Our Partners</h1><br/>
      <h4>We’re teaming up with leading programming and developer sites. Lend your expertise and make them even better.</h4>
    </div>
    <div class="col-4">
      <a href="//developers.google.com/?utm_source=Helpouts_webpage&utm_medium=website&utm_campaign=provider_page"><img src="img/google_developers_logo.png" class="img-6"/></a>
      <p>The official site for Google Developers.
      <br/>
      <br/>
      <p><strong>BETA PARTNER</strong>
    </div>
    <div class="col-4">
      <a href="//www.xda-developers.com/"><img src="img/logo_xda_developers.png" class="img-5"/></a>
      <p> For developers who want to make the most of their mobile devices.
      <p><strong>COMING SOON</strong>
    </div>
    <div class="col-4">
      <a href="//www.codeproject.com/"><img src="img/logo_codeproject.png" class="img-4"/></a>
      <p>Open source code tutorials for software developers and architects.
      <p><strong>COMING SOON</strong>
    </div>
  </div>
  <!-- section 5 -->
  <div class="body-content cols" id="faq">
    <div class="col-12">
      <h1>Frequently Asked Questions</h1>
    </div>
    <div class="col-4">
      <h5>Who will I help?</h5>
      <p>Any developer browsing a partner website can ask questions through the Helpouts platform. We’ll match you only to those whose questions relate to your areas of expertise. Currently, Helpouts is only available in the U.S.
    </div>
    <div class="col-4">
      <h5>When and how will I be notified when a developer needs my help?</h5>
      <p>If a developer has a question that matches your skills, you’ll receive an email and a mobile notification. Once notified, you may accept or decline the question.
    </div>
    <div class="col-4">
      <h5>Will I be paid for offering help?</h5>
      <p>No. At this time, payment is not available for Helpouts initiated from one of our partner websites, though you can earn reviews and endorsements for providing help.
    </div>
    <div class="col-12">
      <a href="//support.google.com/helpouts/?p=partnersites_faq">VISIT OUR HELP CENTER FOR MORE FAQS</a>
    </div>
  </div>
  <!-- footer -->
  <div id="footer" class="cols">
    <div class="footer-1">
      <img src="img/footer_icon_large.png"/>
    </div>
    <div class="footer-2">
      <p>
        <a href="//support.google.com/helpouts/#contact=1">Contact&nbsp;Us</a>
        <a href="//support.google.com/helpouts">Help&nbsp;Center</a>
        <a href="/" class="desktop-only">Visit Helpouts Marketplace</a>
        <a href="/partner/checkin/provider" class="desktop-only">View Helpouts Inbox</a>
        <a href="/partner/checkin/provider" class="mobile-only-inline">Inbox</a>
      </p>
    </div>
  </div>
  <script src="js/carousel.js"></script>